<?php
use yii\helpers\Html;
use yii\helpers\Url;
use yii\widgets\LinkPager;
?>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>头像上传</title>
    <!--<meta name="description" content="这是主页">-->
    <meta name="keywords" content="form">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="stylesheet" href="css/chinaz.css">
    <link rel="stylesheet" href="css/amazeui.swiper.min.css">

    <link rel="stylesheet" href="css/style.css" type="text/css"/>

    <link rel="stylesheet" href="css/index.css">
    <!--<link rel="stylesheet" href="css/amazeui.slick.min.css">
    -->
    <!--<link rel="icon" type="image/png" href="assets/i/favicon.png">
    -->
    <!--<link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
    -->
    <!--<meta name="apple-mobile-web-app-title" content="Amaze UI" />
    -->
    <link rel="stylesheet" href="assets/css/amazeui.min.css"/>
    <link rel="stylesheet" href="assets/css/layout.css"/>
    <script src="assets/js/jquery.min.js"></script>
    <script type="text/javascript" src="js/cropbox-min.js"></script>
    <link rel="stylesheet" href="scripts/css/jquery.jcrop.css" type="text/css"/>
    <script src="scripts/jquery.js" type="text/javascript"></script>
    <script src="scripts/jquery.ajaxfileupload.js" type="text/javascript"></script>
    <script src="scripts/jquery.jcrop.js" type="text/javascript"></script>
    <script src="scripts/avatarCutter.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {

            function getFileSize(fileName) {
                var byteSize = 0;
                //console.log($("#" + fileName).val());
                if($("#" + fileName)[0].files) {
                    var byteSize  = $("#" + fileName)[0].files[0].size;
                }else {
                    //var file = document.getElementById(fileName);
                    //var img = new Image();
                    //file.select();
                    //alert(document.selection.createRange().text);
                    //img.src = file.value;
                    //img.style.display="none";

                    //alert(img.readyState);return 0;
                    //if(img.readyState=="complete"){//已经load完毕，直接打印文件大小
                    //	alert(img.fileSize);//ie获取文件大小
                    //}else {
                    //	img.onreadystatechange=function(){
                    //		if(img.readyState=='complete')//当图片load完毕
                    //			alert(img.fileSize);//ie获取文件大小
                    //	}
                    //}
                    //byteSize = img.fileSize;
                    //byteSize = img.fileSize;
                }
                //alert(byteSize);
                byteSize = Math.ceil(byteSize / 1024) //KB
                return byteSize;//KB
            }
            $("#btnUpload").click(function () {
                var allowImgageType = ['jpg', 'jpeg', 'png', 'gif'];
                var file = $("#file1").val();
                //获取大小
                var byteSize = getFileSize('file1');
                //获取后缀
                if (file.length > 0) {
                    if(byteSize > 2048) {
                        alert("上传的附件文件不能超过2M");
                        return;
                    }
                    var pos = file.lastIndexOf(".");
                    //截取点之后的字符串
                    var ext = file.substring(pos + 1).toLowerCase();
                    //console.log(ext);
                    if($.inArray(ext, allowImgageType) != -1) {
                        ajaxFileUpload();
                    }else {
                        alert("请选择jpg,jpeg,png,gif类型的图片");
                    }
                }
                else {
                    alert("请选择jpg,jpeg,png,gif类型的图片");
                }
            });
            function ajaxFileUpload() {
                $.ajaxFileUpload({
//                    url: "<?//= Url::toRoute('headupload/upload'); ?>//", //用于文件上传的服务器端请求地址
                    url: "index.php",
                    secureuri: false, //一般设置为false
                    fileElementId: 'file1', //文件上传空间的id属性  <input type="file" id="file" name="file" />
                    dataType: 'json', //返回值类型 一般设置为json
                    success: function (data, status)  //服务器成功响应处理函数
                    {
                        //var json = eval('(' + data + ')');
                        //alert(data);
                        $("#picture_original>img").attr({src: data.src, width: data.width, height: data.height});
                        $('#imgsrc').val(data.path);
                        //alert(data.msg);

                        //同时启动裁剪操作，触发裁剪框显示，让用户选择图片区域
                        var cutter = new jQuery.UtrialAvatarCutter({
                                //主图片所在容器ID
                                content : "picture_original",
                                //缩略图配置,ID:所在容器ID;width,height:缩略图大小
                                purviews : [{id:"picture_200",width:200,height:200},{id:"picture_50",width:50,height:50},{id:"picture_30",width:30,height:30}],
                                //选择器默认大小
                                selector : {width:200,height:200},
                                showCoords : function(c) { //当裁剪框变动时，将左上角相对图片的X坐标与Y坐标 宽度以及高度
                                    $("#x1").val(c.x);
                                    $("#y1").val(c.y);
                                    $("#cw").val(c.w);
                                    $("#ch").val(c.h);
                                },
                                cropattrs : {boxWidth: 500, boxHeight: 500}
                            }
                        );
                        cutter.reload(data.src);
                        //var purviews = [{id:"picture_200",width:200,height:200},{id:"picture_50",width:50,height:50},{id:"picture_30",width:30,height:30}];
                        //$("#img1").Jcrop({
                        //    bgColor: 'black',
                        //    bgOpacity: .4,
                        //    setSelect: [100, 100, 150,150],  //设定4个角的初始位置
                        //    aspectRatio: 1 / 1,
                        //   onChange: showCoords,   //当裁剪框变动时执行的函数
                        //   onSelect: showCoords,   //当选择完成时执行的函数
                        //	boxWidth: 500,
                        //	boxHeight: 500
                        //});
                        $('#div_avatar').show();
                    },
                    error: function (data, status, e)//服务器响应失败处理函数
                    {
                        alert(e);
                    }
                })
                return false;
            }

            $('#btnCrop').click(function() {
                $.getJSON('action2.php', {x: $('#x1').val(), y: $('#y1').val(), w: $('#cw').val(), h: $('#ch').val(), src: $('#imgsrc').val()}, function(data) {
                    alert(data.msg);
                });
                return false;
            });
        });

    </script>
    <!--<link rel="stylesheet" href="assets/css/admin.css">--></head>
<body>
<style>
    .objDetail {
        width: 25%;
        border-bottom: 1px solid #7c7c7c;
        /*margin-left:1%;*/
        float: left;
        margin-bottom: 20px;
        padding-top: 16px;
        padding-left: 14px;
        padding-right: 14px;
    }

    .am-pagination li a {
        border-radius: 4px;
        background-color: #dfe5e9;
        color: #7f8c8d;
    }

    .shade:after {
        opacity: 1.0;
        content: "";
        position: absolute;
        top: -1px;
        right: -1px;
        bottom: -1px;
        left: -1px;
        border: 1px solid rgba(0, 0, 0, 0.05)
    }

    #infoHead {
        /*filter: url(blur.svg#blur); !* FireFox, Chrome, Opera *!*/

        /*-webkit-filter: blur(10px); !* Chrome, Opera *!*/
        /*-moz-filter: blur(10px);*/
        /*-ms-filter: blur(10px);*/
        /*filter: blur(10px);*/
        background-color: rgba(0, 0, 0, 0);
        background-repeat: no-repeat;
        background-position: left;
        _background: none;
        _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/InfoBack.png");
        /*_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://k.baobaoke.com/images/2009_mayday.png",sizingMethod="scale");        !*position: absolute;*!*/
        /*z-index: 0;*/
    }

    #cao {
        filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */

        -webkit-filter: blur(5px); /* Chrome, Opera */
        -moz-filter: blur(5px);
        -ms-filter: blur(5px);
        filter: blur(5px);

        filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */
    }

    .personInfo {
        text-align: center;
        /*position: absolute !important;*/
        /*bottom: 0px;*/
    }

    .personInfo a, .personInfo a:hover, .personInfo a:active, .personInfo a:after {
        color: white;
    }

    .unClick {
        background-color: #55B6E4;
    }

    .canClick {
        background-color: #99d3ef;
    }

    .beClick {
        background-color: #5790AC;
    }

    .unClick, .canClick {
        padding-bottom: 6px;
        padding-top: 6px;
    }

    .projectTable tr {
        height: 50px;
    }

    .projectTable {
        border: 1px solid #9aabb7;
        text-align: center;
        font-size: 16px;
        margin-bottom: 20px;
    }

    .projectTable td {
        border: 1px solid #9aabb7;
    }

    .blue {
        color: #3A99DB;
    }

    .red {
        color: red;
    }

    .gary {
        color: gray
    }
</style>
<script>
    $('#uuuuu').height(window.screen.width * 0.22);
</script>
<div style="background-color: #FFFFFF;height: 60px">
    <img src="img/logo-06.png" id="layoutLogo" style="float: left;margin-left: 5%;margin-right: 30px">
    <div id='cssmenu' style="float: left">
        <ul>

            <li class="active">
                <a href='#'>首页</a>
            </li>

            <li>
                <a href='#'>创业项目</a>
            </li>
            <li class=' has-sub'>
                <a href='#'>项目聚幕</a>
                <ul>
                    <li class='has-sub sub-li'>
                        <a href='#'>投资聚募</a>
                    </li>
                    <li class='has-sub sub-li'>
                        <a href='#'>我要融资</a>

                    </li>
                </ul>
            </li>
            <li class=' has-sub'>
                <a href='#'>基础服务</a>
                <ul>
                    <li class='has-sub sub-li'>
                        <a href='#'>线下活动</a>
                    </li>
                    <li class='has-sub sub-li'>
                        <a href='#'>创业资讯</a>
                    </li>
                    <li class='has-sub sub-li'>
                        <a href='#'>工商注册</a>
                    </li>
                    <li class='has-sub sub-li'>
                        <a href='#'>财务代办</a>
                    </li>
                    <li class='has-sub sub-li'>
                        <a href='#'>法务咨询</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <div class="isLogin" style="padding-top: 16px">
        <ul>
            <li>
                <img src="img/icon-38.png" style="width: 12px;margin-right: 10px">
                <span>用户名</span>
            </li>
            <li>
                <img src="img/icon-39.png"style="width: 16px;margin-right: 10px">
                <span>消息中心</span><span style="margin-left: 2px;color:red">(0)</span>
            </li>
            </li>
        </ul>
    </div>
</div>
<div class="contextDiv">

    <div style="width: 88%;margin: 0 auto;background-color: rgb(71,166,220);">
        <div class="context-Nav" style="margin-top: -20px">
            <span style="margin-left: 10px">当前位置:首页></span>
            <span style="color:white">我的资料>头像上传</span>
        </div>
        <div style="width: 100%;height: 2px;background-color: rgb(19,89,126)">
        </div>
        <div style="height: 40px;border-bottom: 1px solid #DDDDDD;background-color: white;padding-top: 4px;padding-left: 12px">
            <h3>Hi~在这里您可以编辑上传您的新头像</h3>
        </div>
        <div class="context-Left" style="border: 0px solid #DDDDDD">
            <div style="width: 100%;overflow: hidden;background-size: 100% auto;color: white;text-align: center"
                 id="infoHead">
                <div style="width: 40%;border-radius: 50%;background-color: red;margin: 0 auto;margin-top: 20px;overflow: hidden;"
                     id="headImg">
                    <img src="img/InfoBack.png" style="clip: rect(100px,100px,600px,600px);width: 100%">
                </div>

                <h4 style="margin-top: 8px;color: #7c7c7c">您当前的头像</h4>
            </div>
            <!--头像div为正方形-->
            <script>
                $('#infoHead').children().css({'position': 'relative', 'opacity': '1.0'})
                $('#infoHead').css('height', window.screen.width * 0.88 * 0.25);
                $('#headImg').css('height', window.screen.width * 0.88 * 0.25 * 0.40);
                $('.personInfo').css('margin-top', window.screen.width * 0.88 * 0.25 * 0.40 * 0.4);
            </script>
        </div>
        <div class="context-Right" style="border: 1px solid #DDDDDD;padding-top: 30px;padding-left: 30px">
            <p><input type="file" id="file1" name="file1" /></p>
            <input type="button" value="上传" id="btnUpload"/>
            <div style="display:none;overflow:hidden" id="div_avatar">
                <div style="width:500px;height:500px;overflow:hidden;float:left;" id="picture_original"><img alt="" src="" /></div>
                <div id="picture_200" style="float:left;margin-left:20px"></div>
                <!--<div id="picture_50" style="float:left;margin-left:20px"></div>-->
                <!--<div id="picture_30" style="float:left;margin-left:20px"></div>-->
                <input type="hidden" id="x1" name="x1" value="0" />
                <input type="hidden" id="y1" name="y1" value="0" />
                <input type="hidden" id="cw" name="cw" value="0" />
                <input type="hidden" id="ch" name="ch" value="0" />
                <input type="hidden" id="imgsrc" name="imgsrc" />
                <input type="button" value="裁剪上传" id="btnCrop"/>
            </div>
        </div>

    </div>
    <div style="clear: both">&nbsp;</div>
</div>
<div style="width: 100%;clear: both"></div>

</div>
<div style="width: 100%;clear:both"></div>
<footer style="background-color: #FFFFFF;height: 100px;width: 100%;margin-bottom: 20px">
    <img src="img/logo-06.png" class="layoutLogo"
         style="float: left;margin-left: 5%;margin-top:12px;margin-right: 30px">
    <ul class="footUl">
        <li><a href="#">商务合作</a></li>
        <li><a href="#">常见问题</a></li>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">业务规划</a></li>
        <li><a href="#">联系我们</a></li>
        <li><a href="#">免责声明</a></li>
    </ul>
    <img src="img/erweima.jpg" style="width: 80px;float: right;margin-right: 5%;margin-top:18px">
</footer>
</body>
<script src="js/index.js"></script>
<!--<![endif]-->
<script src="assets/js/amazeui.min.js"></script>
<!--<script src="js/chinaz.js"></script>-->
<script src="js/amazeui.swiper.min.js"></script>
<!--<script src="js/slick.min.js"></script>
-->
<!--<script src="assets/js/app.js"></script>
-->
</html>
<script>
    $('.context-Right').css('min-height', $('.context-Left').height());
</script>